<template>
	<view class="index-content">
		<TopBar :indexflag="true" :combakflag="true" :lang="true" :bottom="true" :title="userinfo.table_num"
			:barstyle="colortopic()">
		</TopBar>
		<view class="employee-bar" @click="changePassword">
			<view class="name">{{$t('EmployeesName')}} : {{Employee.name}}</view>
			<view class="moblie">{{$t('EmployeesNumer')}} : {{Employee.mobile}}</view>
			<u-icon name="setting-fill" :color="colortopic()" size="25"></u-icon>
		</view>
		<view class="topnav">
			<view :class="acnav==index?'item acitem':'item'" v-for="(item,index) in navList" @click="changeNav(index)">
				{{$t(item)}}
			</view>
		</view>
		<view class="cartshop">
			<CartShop v-show="acnav==0 && Shopdata" :shopdata="Shopdata" :shop_id="tabelinfo.shop_id" type="employee">
			</CartShop>
			<Orders v-if="acnav==1"></Orders>
			<MeWindow v-if="acnav==2"></MeWindow>
		</view>
		<view class="offshop" v-if="Shopdata && !Shopdata.status" :dir="i18nLocale=='ug'?'rtl':''">
			<view class="off-box">
				<u-icon name="lock" :color="colortopic()" size="50"></u-icon>
				<view class="">{{$t('RestaurantClosed')}}</view>
				<view class="shop-time">
					<text>{{$t('BusinessHours')}}</text>
					{{Shopdata.work_time}}
				</view>
			</view>
		</view>
		<Loading :show="loadshow" text="" iconName="circle-round" :showText="false"></Loading>
	</view>
</template>

<script>
	import CartShop from "@/components/cart-shop/cart-shop.vue"
	import Orders from "@/pages/employee/employeeorder/index.vue"
	import MeWindow from "@/pages/employee/me.vue"

	import {
		getshopone
	} from '@/api/all.js';
	export default {
		components: {
			CartShop,
			Orders,
			MeWindow
		},

		data() {
			return {
				acnav: 0,
				loadshow: false,
				tabelinfo: this.$store.state.tabelinfo,
				dataList: [],
				navList: ['Menu', 'Orders', 'EmployeeTotal'],
				userinfo: {
					shop_id: '',
					table_num: ''
				}
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: this.$t('Home')
			})
			this.loadshow = true;
			if (this.$store.state.employeeinfo) {
				let shop_id = this.$store.state.employeeinfo.shop_id;
				if (shop_id) {
					this.getshoplist(shop_id);
				}
			}

		},

		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
			Shopdata() {
				return this.$store.state.shop.totalshop;
			},
			Employee() {
				return this.$store.state.employeeinfo
			}
		},
		methods: {
			changeNav(index) {
				this.acnav = index;
			},
			//获取商铺商品
			getshoplist(shop_id) {
				let that = this;
				if (this.$store.state.shop.totalshop) {
					that.$store.commit('clearShop');
				}
				getshopone({
					id: shop_id
				}).then(res => {
					if (res.code == 200) {
						that.loadshow = false;
						let data = res.body.data;
						that.$store.commit('Setshopinfo', data);
					} else {
						console.log('错误');
					}
				})
			},
			changePassword(){
				uni.navigateTo({
					url:'/pages/employee/password'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;

		.employee-bar {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: $uni-bg-color-box;
			box-sizing: border-box;
			padding: 10rpx 10rpx;
			font-size: $uni-font-size-base;

		}

		.topnav {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: $uni-bg-color-box;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			font-size: $uni-font-size-base;

			.item {
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0rpx;
			}

			.acitem {
				color: $uni-color-topic;
			}
		}

		.cartshop {
			width: 100%;
			height: calc(100% - 270rpx);
			box-sizing: border-box;
			position: relative;

		}

		.offshop {
			width: 100%;
			height: 100%;
			backdrop-filter: blur(3px);
			position: absolute;
			top: 0%;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.off-box {
				width: 100%;
				height: 350rpx;
				position: absolute;
				bottom: 0%;
				left: 0%;
				background-color: #ccc;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				// border-radius: $uni-border-radius-lg;
				font-size: $uni-font-size-lg;

				.shop-time {
					display: flex;
					align-items: center;
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm1;

					text {
						padding: 0rpx 10rpx;
					}
				}
			}
		}
	}
</style>